
<!doctype html>
<html lang="en" class="no-js">
  <head>
    
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1">
      
        <meta name="description" content="Documentation for PixivFE">
      
      
      
      
      
      
      <link rel="icon" href="../../favicon.ico">
      <meta name="generator" content="mkdocs-1.5.3, mkdocs-material-9.5.15">
    
    
      
        <title>A unified documentation for PixivFE - PixivFE Documentation</title>
      
    
    
      <link rel="stylesheet" href="../../assets/stylesheets/main.7e359304.min.css">
      
        
        <link rel="stylesheet" href="../../assets/stylesheets/palette.06af60db.min.css">
      
      


    
    
      
    
    
      
        
        
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback">
        <style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style>
      
    
    
      <link rel="stylesheet" href="../../css/extra.css">
    
    <script>__md_scope=new URL("../..",location),__md_hash=e=>[...e].reduce((e,_)=>(e<<5)-e+_.charCodeAt(0),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
    
      

    
    
    
   <link href="../../assets/stylesheets/glightbox.min.css" rel="stylesheet"/><style>
    html.glightbox-open { overflow: initial; height: 100%; }
    .gslide-title { margin-top: 0px; user-select: text; }
    .gslide-desc { color: #666; user-select: text; }
    .gslide-image img { background: white; }
    .gscrollbar-fixer { padding-right: 15px; }
    .gdesc-inner { font-size: 0.75rem; }
    body[data-md-color-scheme="slate"] .gdesc-inner { background: var(--md-default-bg-color);}
    body[data-md-color-scheme="slate"] .gslide-title { color: var(--md-default-fg-color);}
    body[data-md-color-scheme="slate"] .gslide-desc { color: var(--md-default-fg-color);}</style> <script src="../../assets/javascripts/glightbox.min.js"></script></head>
  
  
    
    
      
    
    
    
    
    <body dir="ltr" data-md-color-scheme="default" data-md-color-primary="custom" data-md-color-accent="indigo">
  
    
    <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
    <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
    <label class="md-overlay" for="__drawer"></label>
    <div data-md-component="skip">
      
        
        <a href="#a-unified-documentation-for-pixivfe" class="md-skip">
          Skip to content
        </a>
      
    </div>
    <div data-md-component="announce">
      
    </div>
    
    
      

  

<header class="md-header md-header--shadow" data-md-component="header">
  <nav class="md-header__inner md-grid" aria-label="Header">
    <a href="../.." title="PixivFE Documentation" class="md-header__button md-logo" aria-label="PixivFE Documentation" data-md-component="logo">
      
  
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4.935 0A4.924 4.924 0 0 0 0 4.935v14.13A4.924 4.924 0 0 0 4.935 24h14.13A4.924 4.924 0 0 0 24 19.065V4.935A4.924 4.924 0 0 0 19.065 0zm7.81 4.547c2.181 0 4.058.676 5.399 1.847a6.118 6.118 0 0 1 2.116 4.66c.005 1.854-.88 3.476-2.257 4.563-1.375 1.092-3.225 1.697-5.258 1.697-2.314 0-4.46-.842-4.46-.842v2.718c.397.116 1.048.365.635.779H5.79c-.41-.41.19-.65.644-.779V7.666c-1.053.81-1.593 1.51-1.868 2.031.32 1.02-.284.969-.284.969l-1.09-1.73s3.868-4.39 9.553-4.39zm-.19.971c-1.423-.003-3.184.473-4.27 1.244v8.646c.988.487 2.484.832 4.26.832h.01c1.596 0 2.98-.593 3.93-1.533.952-.948 1.486-2.183 1.492-3.683-.005-1.54-.504-2.864-1.42-3.86-.918-.992-2.274-1.645-4.002-1.646Z"/></svg>

    </a>
    <label class="md-header__button md-icon" for="__drawer">
      
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2Z"/></svg>
    </label>
    <div class="md-header__title" data-md-component="header-title">
      <div class="md-header__ellipsis">
        <div class="md-header__topic">
          <span class="md-ellipsis">
            PixivFE Documentation
          </span>
        </div>
        <div class="md-header__topic" data-md-component="header-topic">
          <span class="md-ellipsis">
            
              A unified documentation for PixivFE
            
          </span>
        </div>
      </div>
    </div>
    
      
        <form class="md-header__option" data-md-component="palette">
  
    
    
    
    <input class="md-option" data-md-color-media="(prefers-color-scheme: light)" data-md-color-scheme="default" data-md-color-primary="custom" data-md-color-accent="indigo"  aria-label="Switch to dark theme"  type="radio" name="__palette" id="__palette_0">
    
      <label class="md-header__button md-icon" title="Switch to dark theme" for="__palette_1" hidden>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a4 4 0 0 0-4 4 4 4 0 0 0 4 4 4 4 0 0 0 4-4 4 4 0 0 0-4-4m0 10a6 6 0 0 1-6-6 6 6 0 0 1 6-6 6 6 0 0 1 6 6 6 6 0 0 1-6 6m8-9.31V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69Z"/></svg>
      </label>
    
  
    
    
    
    <input class="md-option" data-md-color-media="(prefers-color-scheme: dark)" data-md-color-scheme="slate" data-md-color-primary="custom" data-md-color-accent="indigo"  aria-label="Switch to light theme"  type="radio" name="__palette" id="__palette_1">
    
      <label class="md-header__button md-icon" title="Switch to light theme" for="__palette_0" hidden>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 18c-.89 0-1.74-.2-2.5-.55C11.56 16.5 13 14.42 13 12c0-2.42-1.44-4.5-3.5-5.45C10.26 6.2 11.11 6 12 6a6 6 0 0 1 6 6 6 6 0 0 1-6 6m8-9.31V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69Z"/></svg>
      </label>
    
  
</form>
      
    
    
      <script>var media,input,key,value,palette=__md_get("__palette");if(palette&&palette.color){"(prefers-color-scheme)"===palette.color.media&&(media=matchMedia("(prefers-color-scheme: light)"),input=document.querySelector(media.matches?"[data-md-color-media='(prefers-color-scheme: light)']":"[data-md-color-media='(prefers-color-scheme: dark)']"),palette.color.media=input.getAttribute("data-md-color-media"),palette.color.scheme=input.getAttribute("data-md-color-scheme"),palette.color.primary=input.getAttribute("data-md-color-primary"),palette.color.accent=input.getAttribute("data-md-color-accent"));for([key,value]of Object.entries(palette.color))document.body.setAttribute("data-md-color-"+key,value)}</script>
    
    
    
      <label class="md-header__button md-icon" for="__search">
        
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg>
      </label>
      <div class="md-search" data-md-component="search" role="dialog">
  <label class="md-search__overlay" for="__search"></label>
  <div class="md-search__inner" role="search">
    <form class="md-search__form" name="search">
      <input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
      <label class="md-search__icon md-icon" for="__search">
        
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg>
        
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12Z"/></svg>
      </label>
      <nav class="md-search__options" aria-label="Search">
        
        <button type="reset" class="md-search__icon md-icon" title="Clear" aria-label="Clear" tabindex="-1">
          
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"/></svg>
        </button>
      </nav>
      
    </form>
    <div class="md-search__output">
      <div class="md-search__scrollwrap" data-md-scrollfix>
        <div class="md-search-result" data-md-component="search-result">
          <div class="md-search-result__meta">
            Initializing search
          </div>
          <ol class="md-search-result__list" role="presentation"></ol>
        </div>
      </div>
    </div>
  </div>
</div>
    
    
      <div class="md-header__source">
        <a href="https://codeberg.org/vnpower/pixivfe" title="Go to repository" class="md-source" data-md-component="source">
  <div class="md-source__icon md-icon">
    
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
  </div>
  <div class="md-source__repository">
    vnpower/pixivfe
  </div>
</a>
      </div>
    
  </nav>
  
</header>
    
    <div class="md-container" data-md-component="container">
      
      
        
          
        
      
      <main class="md-main" data-md-component="main">
        <div class="md-main__inner md-grid">
          
            
              
              <div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
                <div class="md-sidebar__scrollwrap">
                  <div class="md-sidebar__inner">
                    



<nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
  <label class="md-nav__title" for="__drawer">
    <a href="../.." title="PixivFE Documentation" class="md-nav__button md-logo" aria-label="PixivFE Documentation" data-md-component="logo">
      
  
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4.935 0A4.924 4.924 0 0 0 0 4.935v14.13A4.924 4.924 0 0 0 4.935 24h14.13A4.924 4.924 0 0 0 24 19.065V4.935A4.924 4.924 0 0 0 19.065 0zm7.81 4.547c2.181 0 4.058.676 5.399 1.847a6.118 6.118 0 0 1 2.116 4.66c.005 1.854-.88 3.476-2.257 4.563-1.375 1.092-3.225 1.697-5.258 1.697-2.314 0-4.46-.842-4.46-.842v2.718c.397.116 1.048.365.635.779H5.79c-.41-.41.19-.65.644-.779V7.666c-1.053.81-1.593 1.51-1.868 2.031.32 1.02-.284.969-.284.969l-1.09-1.73s3.868-4.39 9.553-4.39zm-.19.971c-1.423-.003-3.184.473-4.27 1.244v8.646c.988.487 2.484.832 4.26.832h.01c1.596 0 2.98-.593 3.93-1.533.952-.948 1.486-2.183 1.492-3.683-.005-1.54-.504-2.864-1.42-3.86-.918-.992-2.274-1.645-4.002-1.646Z"/></svg>

    </a>
    PixivFE Documentation
  </label>
  
    <div class="md-nav__source">
      <a href="https://codeberg.org/vnpower/pixivfe" title="Go to repository" class="md-source" data-md-component="source">
  <div class="md-source__icon md-icon">
    
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
  </div>
  <div class="md-source__repository">
    vnpower/pixivfe
  </div>
</a>
    </div>
  
  <ul class="md-nav__list" data-md-scrollfix>
    
      
      
  
  
  
  
    <li class="md-nav__item">
      <a href="../.." class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Home
  </span>
  

      </a>
    </li>
  

    
      
      
  
  
  
  
    <li class="md-nav__item">
      <a href="../../instance-list.md" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Instance list
  </span>
  

      </a>
    </li>
  

    
      
      
  
  
  
  
    <li class="md-nav__item">
      <a href="../../public-image-proxies.md" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Public image proxies
  </span>
  

      </a>
    </li>
  

    
      
      
  
  
  
  
    <li class="md-nav__item">
      <a href="../../known-quirks/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Known quirks
  </span>
  

      </a>
    </li>
  

    
      
      
  
  
  
  
    
    
      
        
      
        
      
        
      
        
      
    
    
      
        
        
      
    
    
    <li class="md-nav__item md-nav__item--section md-nav__item--nested">
      
        
        
          
        
        <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_5" >
        
          
          <label class="md-nav__link" for="__nav_5" id="__nav_5_label" tabindex="">
            
  
  <span class="md-ellipsis">
    Hosting
  </span>
  

            <span class="md-nav__icon md-icon"></span>
          </label>
        
        <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_5_label" aria-expanded="false">
          <label class="md-nav__title" for="__nav_5">
            <span class="md-nav__icon md-icon"></span>
            Hosting
          </label>
          <ul class="md-nav__list" data-md-scrollfix>
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../environment-variables/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Environment variables
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../hosting-pixivfe/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Hosting PixivFE
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../hosting-image-proxy-server/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Hosting an image proxy server for Pixiv
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../obtaining-pixivfe-token/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Obtaining the PIXIVFE_TOKEN cookie
  </span>
  

      </a>
    </li>
  

              
            
          </ul>
        </nav>
      
    </li>
  

    
  </ul>
</nav>
                  </div>
                </div>
              </div>
            
            
              
              <div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
                <div class="md-sidebar__scrollwrap">
                  <div class="md-sidebar__inner">
                    

<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
  
  
  
    
  
  
    <label class="md-nav__title" for="__toc">
      <span class="md-nav__icon md-icon"></span>
      Table of contents
    </label>
    <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
      
        <li class="md-nav__item">
  <a href="#proposals" class="md-nav__link">
    <span class="md-ellipsis">
      Proposals
    </span>
  </a>
  
    <nav class="md-nav" aria-label="Proposals">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#pixivision" class="md-nav__link">
    <span class="md-ellipsis">
      Pixivision
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#sketch" class="md-nav__link">
    <span class="md-ellipsis">
      Sketch
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#ugoira-support" class="md-nav__link">
    <span class="md-ellipsis">
      Ugoira support
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#landing-page" class="md-nav__link">
    <span class="md-ellipsis">
      Landing page
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#popular-artworks" class="md-nav__link">
    <span class="md-ellipsis">
      Popular artworks
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#user-discovery-page" class="md-nav__link">
    <span class="md-ellipsis">
      "User discovery" page
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#search-suggestions" class="md-nav__link">
    <span class="md-ellipsis">
      Search suggestions
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#app-api-support" class="md-nav__link">
    <span class="md-ellipsis">
      App API support
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#novel-page" class="md-nav__link">
    <span class="md-ellipsis">
      Novel page
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#image-grid-layout" class="md-nav__link">
    <span class="md-ellipsis">
      Image grid layout
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#series" class="md-nav__link">
    <span class="md-ellipsis">
      Series
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#servers-pixivfe-git-versioncommit" class="md-nav__link">
    <span class="md-ellipsis">
      Server's PixivFE Git version/commit
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#artwork-filters" class="md-nav__link">
    <span class="md-ellipsis">
      Artwork filters
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#quick-download-button" class="md-nav__link">
    <span class="md-ellipsis">
      Quick download button
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#download-all-buttons-for-all-containers" class="md-nav__link">
    <span class="md-ellipsis">
      Download all buttons for all containers
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#filters" class="md-nav__link">
    <span class="md-ellipsis">
      Filters
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#page-profile" class="md-nav__link">
    <span class="md-ellipsis">
      Page profile
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#option-to-open-in-new-tabs" class="md-nav__link">
    <span class="md-ellipsis">
      Option to open in new tabs
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#download-button-in-artwork-page" class="md-nav__link">
    <span class="md-ellipsis">
      Download button in artwork page
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#option-to-select-default-image-quality-in-artwork-page" class="md-nav__link">
    <span class="md-ellipsis">
      Option to select default image quality in artwork page
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#flaws" class="md-nav__link">
    <span class="md-ellipsis">
      Flaws
    </span>
  </a>
  
    <nav class="md-nav" aria-label="Flaws">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#cookies-management-validation" class="md-nav__link">
    <span class="md-ellipsis">
      Cookies management / validation
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#switchers" class="md-nav__link">
    <span class="md-ellipsis">
      "Switchers"
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#kmutex" class="md-nav__link">
    <span class="md-ellipsis">
      "kmutex"
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#references" class="md-nav__link">
    <span class="md-ellipsis">
      References
    </span>
  </a>
  
</li>
      
    </ul>
  
</nav>
                  </div>
                </div>
              </div>
            
          
          
            <div class="md-content" data-md-component="content">
              <article class="md-content__inner md-typeset">
                
                  

  
    <a href="https://codeberg.org/vnpower/pixivfe/edit/master/doc/dev/unified.md" title="Edit this page" class="md-content__button md-icon">
      
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 20H6V4h7v5h5v3.1l2-2V8l-6-6H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h4v-2m10.2-7c.1 0 .3.1.4.2l1.3 1.3c.2.2.2.6 0 .8l-1 1-2.1-2.1 1-1c.1-.1.2-.2.4-.2m0 3.9L14.1 23H12v-2.1l6.1-6.1 2.1 2.1Z"/></svg>
    </a>
  
  


<h1 id="a-unified-documentation-for-pixivfe">A unified documentation for PixivFE<a class="headerlink" href="#a-unified-documentation-for-pixivfe" title="Anchor link to this section for reference">&para;</a></h1>
<h2 id="proposals">Proposals<a class="headerlink" href="#proposals" title="Anchor link to this section for reference">&para;</a></h2>
<p>This section contains some potential features or redesigns that can be implemented into PixivFE.</p>
<h3 id="pixivision">Pixivision<a class="headerlink" href="#pixivision" title="Anchor link to this section for reference">&para;</a></h3>
<p><strong>Summary</strong>: Pixivision is a service owned by Pixiv that publishes articles about various types of artwork themes...</p>
<p><strong>Notes</strong>: <a href="https://www.pixivision.net/en/">Pixivision</a> is an independent service. Most of the data comes from Pixivision's website.
Pixivision does not provide an API for data access. Pages on Pixivision seems to be static, so the HTML could be easily parsed.</p>
<p><strong>Thoughts</strong>:
- Write a separate module for Pixivision and integrate it into PixivFE.
- We do web scraping and HTML parsing for this one.</p>
<h3 id="sketch">Sketch<a class="headerlink" href="#sketch" title="Anchor link to this section for reference">&para;</a></h3>
<p><strong>Summary</strong>: Sketch is a service owned by Pixiv that allow users to livestream, mostly for their drawing process.</p>
<p><strong>Notes</strong>: <a href="https://sketch.pixiv.net/">Sketch</a> is an independent service. Most of the data comes from Pixivision's website.
Sketch has a dedicated API for data access. Sketch uses the same type of authentication that Pixiv has.
Detailed notes TBA.</p>
<p><strong>Thoughts</strong>:
- Thanks to the public API, pages could be build easily.
- For the streaming part, we may have to include a JavaScript library for HLS streaming.</p>
<h3 id="ugoira-support">Ugoira support<a class="headerlink" href="#ugoira-support" title="Anchor link to this section for reference">&para;</a></h3>
<p><strong>Summary</strong>: Ugoiras are Pixiv's "animated image" format.</p>
<p><strong>Notes</strong>: Ugoiras are basically a bunch of sorted images combined with a fixed delay for each of them. Pixiv provides one JSON endpoint for delays and filenames
and one endpoint for the (ZIP) images archive.
One has to write their own player based on things Pixiv provide.
You can checkout Pixiv's implementation on their own ugoira player <a href="https://github.com/pixiv/zip_player">here</a>.</p>
<p><strong>Thoughts</strong>:
- GIF/APNG/WEBP renderer.
- Some people want to convert ugoiras to video formats? (no idea)</p>
<h3 id="landing-page">Landing page<a class="headerlink" href="#landing-page" title="Anchor link to this section for reference">&para;</a></h3>
<p><strong>Summary</strong>: PixivFE's homepage.</p>
<p><strong>Notes</strong>: Pixiv's homepage contains a lot of interesting contents.
PixivFE's backend for the landing page already implemented almost all of the data from Pixiv.
The only thing left is to write the frontend for them. Detailed notes TBA.</p>
<p><strong>Thoughts</strong>:
- Spend some time to write some HTML/SCSS.
- Currently, you have to authenticate (login) in order to access the <em>full</em> landing page. Can we show the <em>full</em> page to unauthenticated users as well?</p>
<h3 id="popular-artworks">Popular artworks<a class="headerlink" href="#popular-artworks" title="Anchor link to this section for reference">&para;</a></h3>
<p><strong>Summary</strong>: Pixiv has a "Sort by views" and "Sort by bookmarks" feature that is only available for premium users.</p>
<p><strong>Notes</strong>: There are some search <a href="https://github.com/kokseen1/Mashiro/">"hacks"</a> that could yield relatively accurate results for popular artworks.</p>
<p><strong>Ideas</strong>:
- Look into repos that attempts to retrieve popular artworks
- If search "hacking" is possible, could there be more "hacks" around?</p>
<h3 id="user-discovery-page">"User discovery" page<a class="headerlink" href="#user-discovery-page" title="Anchor link to this section for reference">&para;</a></h3>
<p><strong>Summary</strong>: Like artwork discovery, but it is for users.</p>
<p><strong>Notes</strong>: Currently, we do not know if we could implement the "user follow" function into PixivFE.
The development for this page has been put on hold because of it, since "following", after all, is what you want to do if you discover an user you like.</p>
<p><strong>Ideas</strong>:
- It is easy to implement thanks to the API.</p>
<h3 id="search-suggestions">Search suggestions<a class="headerlink" href="#search-suggestions" title="Anchor link to this section for reference">&para;</a></h3>
<p><strong>Summary</strong>: Pixiv provides <a href="https://www.pixiv.net/ajax/search/suggestion?mode=all&amp;lang=en">an API endpoint</a> for search suggestions.</p>
<p><strong>Notes</strong>: The search suggestions appear when you focus on the search bar.</p>
<p><strong>Ideas</strong>:
- We can prefetch the search suggestions for every requests on PixivFE. But this means we will have to add one request (to Pixiv's API) for each PixivFE page request. (Caching?)
- We can implement JavaScript to fetch the suggestions every time the user focuses on the search bar.
- We can create a separate page just for this.</p>
<h3 id="app-api-support">App API support<a class="headerlink" href="#app-api-support" title="Anchor link to this section for reference">&para;</a></h3>
<p><strong>Summary</strong>: Apart of the public AJAX API, Pixiv also provides a private API, used specifically for mobile applications.</p>
<p><strong>Notes</strong>: Because you already could do almost everything through the AJAX API, there is really no point to integrate the App API.
I added this section because there are some limitations to the public API (following,...).</p>
<p><strong>Ideas</strong>:
- Write more stuff when desperate.</p>
<h3 id="novel-page">Novel page<a class="headerlink" href="#novel-page" title="Anchor link to this section for reference">&para;</a></h3>
<h3 id="image-grid-layout">Image grid layout<a class="headerlink" href="#image-grid-layout" title="Anchor link to this section for reference">&para;</a></h3>
<h3 id="series">Series<a class="headerlink" href="#series" title="Anchor link to this section for reference">&para;</a></h3>
<h3 id="servers-pixivfe-git-versioncommit">Server's PixivFE Git version/commit<a class="headerlink" href="#servers-pixivfe-git-versioncommit" title="Anchor link to this section for reference">&para;</a></h3>
<h3 id="artwork-filters">Artwork filters<a class="headerlink" href="#artwork-filters" title="Anchor link to this section for reference">&para;</a></h3>
<h3 id="quick-download-button">Quick download button<a class="headerlink" href="#quick-download-button" title="Anchor link to this section for reference">&para;</a></h3>
<h3 id="download-all-buttons-for-all-containers">Download all buttons for all containers<a class="headerlink" href="#download-all-buttons-for-all-containers" title="Anchor link to this section for reference">&para;</a></h3>
<h3 id="filters">Filters<a class="headerlink" href="#filters" title="Anchor link to this section for reference">&para;</a></h3>
<h3 id="page-profile">Page profile<a class="headerlink" href="#page-profile" title="Anchor link to this section for reference">&para;</a></h3>
<h3 id="option-to-open-in-new-tabs">Option to open in new tabs<a class="headerlink" href="#option-to-open-in-new-tabs" title="Anchor link to this section for reference">&para;</a></h3>
<h3 id="download-button-in-artwork-page">Download button in artwork page<a class="headerlink" href="#download-button-in-artwork-page" title="Anchor link to this section for reference">&para;</a></h3>
<h3 id="option-to-select-default-image-quality-in-artwork-page">Option to select default image quality in artwork page<a class="headerlink" href="#option-to-select-default-image-quality-in-artwork-page" title="Anchor link to this section for reference">&para;</a></h3>
<h2 id="flaws">Flaws<a class="headerlink" href="#flaws" title="Anchor link to this section for reference">&para;</a></h2>
<p>This section documents some bad/buggy designs in PixivFE's design, both frontend and backend.</p>
<h3 id="cookies-management-validation">Cookies management / validation<a class="headerlink" href="#cookies-management-validation" title="Anchor link to this section for reference">&para;</a></h3>
<p>All cookie values could be set directly without validation. Should we be concerned?</p>
<h3 id="switchers">"Switchers"<a class="headerlink" href="#switchers" title="Anchor link to this section for reference">&para;</a></h3>
<p>Switchers should know what the current value is.</p>
<h3 id="kmutex">"kmutex"<a class="headerlink" href="#kmutex" title="Anchor link to this section for reference">&para;</a></h3>
<p>Sometimes panics.</p>
<h2 id="references">References<a class="headerlink" href="#references" title="Anchor link to this section for reference">&para;</a></h2>
<p>This section contains multiple external links to materials/resources that could help.</p>
<ul>
<li><a href="https://www.pixiv.pics/">pixiv.pics</a></li>
</ul>







  
    
  
  
    
  


  <aside class="md-source-file">
    
      
  <span class="md-source-file__fact">
    <span class="md-icon" title="Last update">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21 13.1c-.1 0-.3.1-.4.2l-1 1 2.1 2.1 1-1c.2-.2.2-.6 0-.8l-1.3-1.3c-.1-.1-.2-.2-.4-.2m-1.9 1.8-6.1 6V23h2.1l6.1-6.1-2.1-2M12.5 7v5.2l4 2.4-1 1L11 13V7h1.5M11 21.9c-5.1-.5-9-4.8-9-9.9C2 6.5 6.5 2 12 2c5.3 0 9.6 4.1 10 9.3-.3-.1-.6-.2-1-.2s-.7.1-1 .2C19.6 7.2 16.2 4 12 4c-4.4 0-8 3.6-8 8 0 4.1 3.1 7.5 7.1 7.9l-.1.2v1.8Z"/></svg>
    </span>
    <span class="git-revision-date-localized-plugin git-revision-date-localized-plugin-date">August 27, 2024</span>
  </span>

    
    
      
  <span class="md-source-file__fact">
    <span class="md-icon" title="Created">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14.47 15.08 11 13V7h1.5v5.25l3.08 1.83c-.41.28-.79.62-1.11 1m-1.39 4.84c-.36.05-.71.08-1.08.08-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8c0 .37-.03.72-.08 1.08.69.1 1.33.32 1.92.64.1-.56.16-1.13.16-1.72 0-5.5-4.5-10-10-10S2 6.5 2 12s4.47 10 10 10c.59 0 1.16-.06 1.72-.16-.32-.59-.54-1.23-.64-1.92M18 15v3h-3v2h3v3h2v-3h3v-2h-3v-3h-2Z"/></svg>
    </span>
    <span class="git-revision-date-localized-plugin git-revision-date-localized-plugin-date">August 27, 2024</span>
  </span>

    
    
    
  </aside>





                
              </article>
            </div>
          
          
<script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script>
        </div>
        
          <button type="button" class="md-top md-icon" data-md-component="top" hidden>
  
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8v12Z"/></svg>
  Back to top
</button>
        
      </main>
      
        <footer class="md-footer">
  
    
  
  <div class="md-footer-meta md-typeset">
    <div class="md-footer-meta__inner md-grid">
      <div class="md-copyright">
  
    <div class="md-copyright__highlight">
      GFDL-1.3-or-later
    </div>
  
  
    Made with
    <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
      Material for MkDocs
    </a>
  
</div>
      
        <div class="md-social">
  
    
    
    
    
    <a href="https://codeberg.org/VnPower/PixivFE" target="_blank" rel="noopener" title="PixivFE on Codeberg" class="md-social__link">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11.955.49A12 12 0 0 0 0 12.49a12 12 0 0 0 1.832 6.373L11.838 5.928a.187.14 0 0 1 .324 0l10.006 12.935A12 12 0 0 0 24 12.49a12 12 0 0 0-12-12 12 12 0 0 0-.045 0zm.375 6.467 4.416 16.553a12 12 0 0 0 5.137-4.213z"/></svg>
    </a>
  
    
    
    
    
    <a href="https://gitlab.com/pixivfe" target="_blank" rel="noopener" title="PixivFE on GitLab" class="md-social__link">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m23.6 9.593-.033-.086L20.3.98a.851.851 0 0 0-.336-.405.875.875 0 0 0-1 .054.875.875 0 0 0-.29.44L16.47 7.818H7.537L5.332 1.07a.857.857 0 0 0-.29-.441.875.875 0 0 0-1-.054.859.859 0 0 0-.336.405L.433 9.502l-.032.086a6.066 6.066 0 0 0 2.012 7.01l.01.009.03.021 4.977 3.727 2.462 1.863 1.5 1.132a1.008 1.008 0 0 0 1.22 0l1.499-1.132 2.461-1.863 5.006-3.75.013-.01a6.068 6.068 0 0 0 2.01-7.002z"/></svg>
    </a>
  
</div>
      
    </div>
  </div>
</footer>
      
    </div>
    <div class="md-dialog" data-md-component="dialog">
      <div class="md-dialog__inner md-typeset"></div>
    </div>
    
      <div class="md-progress" data-md-component="progress" role="progressbar"></div>
    
    
    <script id="__config" type="application/json">{"base": "../..", "features": ["navigation.instant", "navigation.instant.progress", "navigation.tracking", "navigation.sections", "navigation.expand", "navigation.indexes", "toc.follow", "navigation.top", "content.code.copy", "navigation.footer", "content.action.edit", "content.code.annotate"], "search": "../../assets/javascripts/workers/search.b8dbb3d2.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}}</script>
    
    
      <script src="../../assets/javascripts/bundle.bd41221c.min.js"></script>
      
        <script src="https://unpkg.com/tablesort@5.3.0/dist/tablesort.min.js"></script>
      
        <script src="../../js/tablesort.js"></script>
      
    
  <script>document$.subscribe(() => {const lightbox = GLightbox({"touchNavigation": true, "loop": false, "zoomable": true, "draggable": true, "openEffect": "fade", "closeEffect": "fade", "slideEffect": "slide"});})</script></body>
</html>